<template>
	<view style="display: flex;flex-direction: column;height: 100vh;justify-content: space-between;">
		<view style="flex: 1;overflow: scroll;background-color: #eee;" v-if="detailsData">
			<view style="margin-top: 10px;background-color: #fff;padding: 10px;">
				<u-section title="商品清单" :right="false" line-color="#00aa00" font-size="32"></u-section>
				
				<view class="page-box" style="margin-top: 10px;background-color: #fff;padding: 10px;border-top: 1px solid #eee ;">
					<view class="order" >
						<!-- <view class="top">
							<view class="left">
								<u-icon name="car" :size="30" color="rgb(94,94,94)"></u-icon>
								<view class="store">{{detailsData.code}}</view>
							</view>
							<view class="right">{{ status(detailsData.orderStatus) }}</view>
						</view>
						<view style="margin-top: 10px;font-size: 14px;display: flex;justify-content: space-between;">
							<view >客户:{{ detailsData.basCus.name }}</view>
							<view style="color: #e5d001;">下单时间：{{ detailsData.ddate }}</view>
						</view> -->
						
						<view  v-for="(item, index) in detailsData.rdsList" :key="index">
							<view class="item">
								
								<view class="left"><image :src="item.basInv.picUrl?vuex_config.baseUrl + item.basInv.picUrl:''" mode="aspectFit"></image></view>
								<view class="content">
									<view class="title u-line-2">{{ item.basInv.cinvname }}</view>
									<view class="type">规格：{{item.basInv.cinvstd?item.basInv.cinvstd:''}}</view>
									
								</view>
								<view class="right">
									<view class="price">￥{{item.itaxunitprice?item.itaxunitprice:'暂无单价'}}</view>
									<view class="number">x{{ item.inum }}</view>
									<view v-if="item.bgift == '1'" style="display: flex;justify-content: center;align-items: center;">
										<image style="width: 30px;height: 30px;" src="/static/image/zeng.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
						<!-- <view style="display: flex;font-size: 14px;">
							<text style="flex: 1;text-align: left;">返利金额:{{detailsData.headVO.cdefine7?detailsData.headVO.cdefine7:'0.00'}}</text>
							<text style="flex: 1;text-align: center;">促销金额:{{detailsData.headVO.cdefine16?detailsData.headVO.cdefine16:'0.00'}}</text>
							<text style="flex: 1;text-align: right;">账户金额:{{detailsData.chdefine46?detailsData.chdefine46:'0.00'}}</text>
						</view> -->
						<view >
							<view style="display: flex;justify-content: space-between;">
								<view style="display: flex;">
									<image style="width: 20px;height: 20px;margin-right: 5px;"  src="/static/image/zh.png"></image>
									<text >使用账户金额:</text>
								</view>
								 <text >￥{{detailsData.chdefine46?detailsData.chdefine46:'0.00'}}</text>
							</view>
							<view style="display: flex;justify-content: space-between;margin: 5px 0;">
								<view style="display: flex;">
									<image style="width: 20px;height: 20px;margin-right: 5px;"  src="/static/image/fl.png"></image>
									<text >使用返利金额:</text>
								</view>
								 <text >￥{{detailsData.headVO.cdefine7?detailsData.headVO.cdefine7:'0.00'}}</text>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view style="display: flex;">
									<image style="width: 20px;height: 20px;margin-right: 5px;"  src="/static/image/cx.png"></image>
									<text >使用促销金额:</text>
								</view>
								 <text >￥{{detailsData.headVO.cdefine16?detailsData.headVO.cdefine16:'0.00'}}</text>
							</view>
							
						</view>
						<view class="total">
							<view style="font-size: 28rpx;margin-left: 25px;font-weight: bold;">{{ detailsData.chdefine24 || '不包邮' }}</view>
							<view>
								共{{ totalNum(detailsData.rdsList) }}件商品 合计:
								<text class="total-price">
									￥{{ detailsData.totalMoney?detailsData.totalMoney:'0.00'}}
								
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			

			<view style="margin: 10px 0;background-color: #fff;padding: 10px;">
				<u-section title="订单信息" :right="false" line-color="#00aa00" font-size="32"></u-section>

				<view style="margin-top: 10px;background-color: #fff;padding: 10px;padding: 10px;border-top: 1px solid #eee ;">
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">订单号</text>：
						<text style="flex:1">{{detailsData.code}}</text>
					</view>
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">是否包邮</text>：
						<text style="flex:1">{{ detailsData.chdefine24 || '不包邮' }}</text>
					</view>
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">核发门店</text>：
						<text style="flex:1">{{ detailsData.hfmdName || '暂无' }}</text>
					</view>
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">订单状态</text>：
						<text style="flex:1">{{status(detailsData.orderStatus)}}</text>
					</view>
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">客户</text>：
						<text style="flex:1">{{detailsData.basCus.name}}</text>
					</view>
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">下单时间</text>：
						<!-- <text style="flex:1">{{detailsData.ddate}}</text> -->
						<text style="flex:1">{{detailsData.createDate}}</text> 
					</view>
					<view style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">订单备注</text>：
						<text style="flex:1">{{detailsData.remarks}}</text>
					</view>
					<view v-if="detailsData.orderStatus == 0" style="display: flex; margin-bottom: 5px;">
						<text style="width: 70px;display:inline-block;text-align-last: justify;">作废原因</text>：
						<text style="flex:1">{{detailsData.cancelReason}}</text>
					</view>
				
				</view>
			</view>

		</view>


	</view>

</template>

<script>
	import util from '@/common/fire.js'
	export default {
	data() {
		return {
			detailsData:{
				hfmdName:'',
			},
			remarks: '',
			value: 0,
			list: [],
			payMoney: 0,
			show: false,
			numShow: false,
			title: "选择收货地址",
			curCus: {},
			data: {},
			cusMoney: {
				flhxMoney: '',
				cxhxMoney: ''
			},
			flag: '',
			model: {},
			selectList: [],
			hfmdNameMap: {} // 用于存储门店code和name的映射
		}
	},
	onLoad() {
		let that = this
		
		// 预加载门店列表数据
		this.loadHfmdList();
		
		const eventChannel = this.getOpenerEventChannel();
		  eventChannel.on('acceptDataFromOpenerPage', function(data) {
			console.log('data====1111',data)
			  // let url = `src="${that.vuex_config.baseUrl}/`
			  // data.content = data.content.replace(/src="\//g,'ref="imgs" src="')
			  that.detailsData = data
			  that.detailsData.chdefine46 = util.toFixed2(that.detailsData.chdefine46)
			  that.detailsData.headVO.cdefine7 = util.toFixed2(that.detailsData.headVO.cdefine7)
			  that.detailsData.headVO.cdefine16 = util.toFixed2(that.detailsData.headVO.cdefine16)
			  that.detailsData.totalMoney = util.toFixed2(that.detailsData.totalMoney)
			  
			  // 数据加载后，设置核发门店名称
			  that.setHfmdName();

				// console.log(that.detailsData ,'=======')
		  })
	},
	methods: {
		// 预加载门店列表数据
		loadHfmdList() {
			this.$u.api.shop.findMnCusListData().then(res1 => {
				this.selectList = res1.map(item => {
					item.value = item.code
					item.name = item.cusDefine1 ? `${item.name}` : item.name
					return item
				});
				
				// 创建code到name的映射
				this.hfmdNameMap = res1.reduce((map, item) => {
					map[item.code] = item.cusDefine1 ? `${item.name}/ ${item.cusDefine1}` : item.name;
					return map;
				}, {});
				
				console.log('门店列表加载完成:', this.hfmdNameMap);
				
				// 如果数据已经加载，设置核发门店名称
				if (this.detailsData && this.detailsData.hfmdCode) {
					this.setHfmdName();
				}
			}).catch(error => {
				console.error('加载门店列表失败:', error);
			});
		},
		
		// 设置核发门店名称
		setHfmdName() {
			if (this.detailsData && this.detailsData.hfmdCode) {
				this.detailsData.hfmdName = this.hfmdNameMap[this.detailsData.hfmdCode] || '暂无';
				console.log('设置核发门店名称:', this.detailsData.hfmdCode, this.detailsData.hfmdName);
			}
		},
		
		// 同步获取门店名称（用于模板显示）
		hfmdName(code) {
			if (!code) return '暂无';
			return this.hfmdNameMap[code] || this.detailsData.hfmdName || '暂无';
		},
			status(i){
				let status = ''
				if(i == 0){
					status='已作废'
				}
				if(i == 1){
					status='已完成'
				}
				if(i == 2){
					status='待收货'
				}
				if(i == 3){
					status='待发货'
				}
				if(i == 4){
					status='待审核'
				}
				return status
			},
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.inum;
				});
				return num;
			},

		}


	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 98%;
		text-align: center;
		overflow: scroll;
	}

	.item-menu-image {
		width: 100px;
		height: 85px;
	}

	textarea {
		width: 100%;
		height: 260rpx;
		background-color: #f7f7f7;
		line-height: 60rpx;
		// margin: 40rpx auto;
		padding: 20rpx;
	}
	.order {
		width: 710rpx;
		background-color: #ffffff;
		// margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding-right: 20rpx;
		font-size: 28rpx;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0 0;
			.left {
				margin-right: 20rpx;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				width: 100%;
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
			}
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
</style>